<template>
  <div class="withdrawal">
    <div class="top">
      <img
        src="../../assets/images/cz1.png"
        alt=""
        class="top-img1"
        @click="goback"
      />
      <p class="top-p">{{ $t("common.fasong") }}</p>
      <img
        src="../../assets/images/cz2.png"
        alt=""
        class="top-img2"
        @click="gohistory"
      />
    </div>
    <div class="center">
      <img src="../../assets/images/tx1.png" alt="" class="center-img" />
      <p class="center-p">Tether USDT</p>
    </div>
    <div class="content">
      <div class="content-a">
        <p>{{ $t("common.zhuanzhangwang") }}</p>
      </div>
      <div class="content-b">
        <van-cell @click="showPopup">
          <p class="p1" :style="{ color: stylep ? '#fff' : '' }">
            {{ this.qz }}
          </p>
          <p class="p2"><img src="../../assets/images/cz5.png" alt="" /></p
        ></van-cell>
        <van-popup
          v-model="allshow"
          closeable
          position="bottom"
          :style="{ height: '113.33vw' }"
        >
          <div class="popup-a">
            <p>{{ $t("common.zhuanzhangwang") }}</p>
          </div>
          <div class="popup-b">
            <p>
              {{ $t("common.quebao") }}
            </p>
          </div>
          <div
            class="popup-c"
            @click="butqz(true)"
            :class="popupt ? 'popupt' : ''"
          >
            <div class="div1">Ethereum (ERC20)</div>
            <!-- <div class="div2">手续费 4.00 USDT</div> -->
          </div>
          <div
            class="popup-d"
            @click="butqz(false)"
            :class="!popupt ? 'popupt' : ''"
          >
            <div class="div1">Tron (TRC20)</div>
            <!-- <div class="div2">手续费 0.80 USDT</div> -->
          </div>
          <van-button type="info" class="popup-button" @click="confirm">{{
            $t("common.queding")
          }}</van-button>
        </van-popup>
        <!-- <p class="p1">选择主网</p>
                <p class="p2"><img src="../../assets/images/cz5.png" alt=""></p> -->
      </div>
      <div class="content-c">
        <p>{{ $t("common.tixiandi") }}</p>
      </div>
      <div class="content-d">
        <input v-model="form.address" @input=" form.address =
        form.address.replace(/[\u4e00-\u9fa5/\s+/]|[^a-zA-Z0-9\u4E00-\u9FA5]/g,
        '')" type="text" :placeholder="$t('common.changan')" />
      </div>
      <div class="content-c">
        <p>{{ $t("common.tixianjin") }}</p>
      </div>
      <div class="content-e">
        <input
          v-model="form.quantity"
          :placeholder="$t('common.tixianjin')"
          type="number"
          @input="form.quantity = $formatDecimal(form.quantity, 2)"
        />
        <span>USDT</span>
        <p @click="form.quantity = sumPrice">{{ $t("common.quanbuti") }}</p>
      </div>
      <div class="content-f">
        <div class="div">
          <p class="p1">{{ $t("common.keyongzi") }}</p>
          <p class="p2">{{ sumPrice }} USDT</p>
        </div>
        <div class="div">
          <p class="p3">{{ $t("common.shouxufei") }}</p>
          <p class="p4">{{ detail.serviceCharge }} USDT</p>
        </div>
      </div>
      <div class="content-g">
        <div class="g1">{{ $t("common.tishi") }}</div>
        <div class="g2">
          {{ $t("common.tixianedu")
          }}<span v-if="detail.name">{{ detail.maximumWithdrawalAmountPerDay }} {{currency_name[detail.name-1].description}}</span>
        </div>
        <div class="g2">
          {{ $t("common.zuiditixian")
          }}<span v-if="detail.name">{{ detail.minimumWithdrawalAmount }} {{currency_name[detail.name-1].description}}</span>
        </div>
        <div class="g3">
          {{ $t("common.qingwucanyu") }}
        </div>
      </div>
      <div class="content-k">
        <p class="p1">{{ $t("common.shishidaozhang") }}</p>
        <van-button
          type="info"
          @click="gowithdraw"
          :class="+willAmout <= 0 && 'hui'"
          >{{ $t("common.tixian") }}</van-button
        >
        <p class="p2">{{ willAmout }} <span>USDT</span></p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { Toast } from "vant";
import AccMath from "../../common/math";
import { createSocket } from "../../common/_websocket";
import { ethers } from "ethers";
export default {
  computed: {
    ...mapGetters(["getUserInfo"]),
    willAmout() {
      if (this.form.quantity) {
        return AccMath.accSub(+this.form.quantity, +this.detail.serviceCharge);
      }
      return 0;
    },
  },
  data() {
    return {
      newWebSocket: createSocket(),
      form: {
        address: "",
        actualWithdrawalAmount: "",
        arrivalAddress: "",
        code: "",
        password: "",
        publicChain: "1",
        quantity: "",
        serviceCharge: "",
      },
      sumPrice: 0,
      timeouter: null,
      timer: null,
      userInfo: {},  
      detail: {},
      chainList: [],
      currency_name: [],
      popupt: true,
      qz: "Tron(TRC20)",
      allshow: false,
      stylep: false,
      tronWeb: require("tronweb"),
      // changan: this.$t('common.changan'),
      // chaochuke: this.$t('common.chaochuke'),
      // shaoyushou: this.$t('common.shaoyushou'),
      // chaochuti: this.$t('common.chaochuti'),
      // tixianbuwei: this.$t('common.tixianbuwei'),
    };
  },
  destroyed() {
    this.newWebSocket.close();
  },
  deactivated() {
    this.newWebSocket.close();
  },
  async activated() {
    this.userInfo = this.getUserInfo;
    this.chainList = await this.$getDict("public_chain");
    this.currency_name = await this.$getDict("currency_name");
    // this.form.address = this.userInfo.address;
    // this.form.publicChain =
    //   this.userInfo.chain == "eth"
    //     ? this.chainList[0].value
    //     : this.chainList[1].value;
    this.form.publicChain = this.chainList[1].value
    if (this.userInfo.chain == "trx") {
      this.qz = "Ethereum(ERC20)";
      this.stylep = true;
      this.popupt = true;
    } else if (this.userInfo.chain == "eth") {
      this.qz = "Tron(TRC20)";
      this.stylep = true;
    }
    this.form.address = "";
    this.form.quantity = "";
    this.getInfo();
    this.socketWalletConnect();
  },
  async created() {},
  methods: {
    socketWalletConnect() {
      this.newWebSocket.init({
        url: `/wallet/ws/info`,
        onopen: (msg, data) => {
          this.newWebSocket.websocket.send(
            JSON.stringify({
              type: "subscribe",
              params: ["capitalAccount", ""],
            })
          );
        },
        onmessage: (data) => {
          let zdata = JSON.parse(data);
          if (zdata.params[0] == "capitalAccount") {
            let sum = 0;
            try {
              zdata.data.assetList.forEach((v) => {
                sum += +v.available;
              });
              this.sumPrice = sum;
            } catch (error) {
              //
            }
          }
        },
        onclose: (data) => {
          console.log(data);
        },
      });
    },
    async getInfo() {
      const ret = await this.$http({
        url: "/wallet/currency/withdrawalPage",
        method: "post",
        data: {
          mainNetwork: this.form.publicChain,
        },
      });
      if (ret.data.code === 0) {
        this.detail = ret.data.data;
      }
    },
    goback() {
      this.$router.go("-1");
    },
    gohistory() {
      localStorage.setItem("ls", 1);
      this.$router.push("/history");
    },
    gowithdraw() {
      console.log("this.form.publicChain", this.form.publicChain);
      if (+this.form.quantity > +this.sumPrice) {
        Toast(this.$t("common.chaochuke"));
        return;
      }
      if (this.willAmout < 0 || !this.willAmout) {
        Toast(this.$t("common.shaoyushou"));
        return;
      }
      if (+this.form.quantity > +this.detail.maximumWithdrawalAmountPerDay) {
        Toast(this.$t("common.chaochuti"));
        return;
      }
      // ethers.utils.isAddress('1212')
      if (this.form.publicChain == 1) {
        //以太坊
        if (!ethers.utils.isAddress(this.form.address)) {
          Toast(this.$t("common.youxiaodizhi"));
          return;
        }
      } else {
        //波场
        if (!this.tronWeb.isAddress(this.form.address)) {
          Toast(this.$t("common.youxiaodizhi"));
          return;
        }
      }

      let query = {
        actualWithdrawalAmount: this.willAmout,
        arrivalAddress: this.form.address,
        code: "",
        password: "",
        publicChain: this.form.publicChain,
        quantity: this.form.quantity,
        serviceCharge: this.detail.serviceCharge,
        sourceAddress: "",
      };
      this.$router.push({
        path: "/withdraw",
        query,
      });
    },
    showPopup() {
      this.allshow = true;
      if (this.qz === "Ethereum(ERC20)") {
        this.popupt = true;
      } else if (this.qz === "Tron(TRC20)") {
        this.popupt = false;
      }
    },
    butqz(val) {
      this.popupt = val;
    },
    confirm() {
      this.allshow = false;
      if (this.popupt === true) {
        this.qz = "Ethereum(ERC20)";
        this.stylep = true;
      } else if (this.popupt === false) {
        this.qz = "Tron(TRC20)";
        this.stylep = true;
      }
      this.form.publicChain = this.popupt
        ? this.chainList[0].value
        : this.chainList[1].value;
      this.getInfo();
    },
  },
};
</script>

<style scoped lang="scss">
div {
  box-sizing: border-box;
}
.withdrawal {
  width: 0;
  height: 0;
  .top {
    height: 11.73vw;
    width: 100vw;
    background-color: #090A1B;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //font-family: Microsoft Yahei;
    .top-img1 {
      height: 5.3vw;
      width: 5.3vw;
      margin-left: 2.4vw;
    }
    .top-p {
      font-size: 4.8vw;
      color: rgba(255, 255, 255, 100);
    }
    .top-img2 {
      height: 5.3vw;
      width: 5.3vw;
      margin-right: 3.2vw;
    }
  }
  .center {
    height: 38.13vw;
    width: 100vw;
    background-color: #090A1B;
    .center-img {
      width: 16vw;
      height: 16vw;
      position: relative;
      top: 7.73vw;
    }
    .center-p {
      color: rgba(214, 214, 214, 100);
      font-size: 3.73vw;
      width: 22.6vw;
      height: 5.33vw;
      font-family: PingFangSC-regular;
      position: relative;
      bottom: -11.6vw;
      left: 38.6vw;
    }
  }
  .content {
    height: 129vw;
    width: 100vw;
    background-color: #090A1B;
    .content-a {
      height: 12.53vw;
      background-color: #090A1B;
      p {
        float: left;
        margin-top: 6.13vw;
        margin-left: 4.6vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
      }
    }
    .content-b {
      width: 93.33vw;
      height: 9.6vw;
      border-radius: 0.53vw;
      background-color: rgba(45, 47, 59, 100);
      margin-left: 3.46vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .p1 {
        font-size: 3.73vw;
        color: rgba(79, 82, 93, 100);
        font-family: PingFangSC-regular;
        position: relative;
        left: 2.66vw;
        top: 1.6vw;
        font-weight: 600;
      }
      .p2 {
        width: 4.8vw;
        height: 4.8vw;
        line-height: 5.33vw;
        border-radius: 0.53vw;
        background-color: rgba(79, 82, 93, 100);
        text-align: center;
        margin-right: 2.66vw;
        position: relative;
        left: 86.8vw;
        top: -4vw;
        img {
          width: 3.2vw;
          height: 3.2vw;
        }
      }
    }
    .van-cell {
      padding: 0;
      height: 9.6vw;
      background-color: rgba(45, 47, 59, 100);
    }
    .van-cell::after {
      border-bottom: 0;
    }
    .van-popup {
      border-radius: 2.6vw 2.6vw 0 0;
      background-color: #090A1B;
    }
    ::v-deep .van-popup__close-icon--top-right {
      top: 7.4vw;
      right: 2.9vw;
    }
    ::v-deep .van-popup__close-icon {
      font-size: 5.33vw;
      color: rgba(135, 139, 151, 100);
    }
    .popup-a {
      height: 18.13vw;
      p {
        height: 5.8vw;
        color: rgba(255, 255, 255, 100);
        font-size: 4.2vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 8vw;
        display: flex;
        justify-content: center;
        letter-spacing: 0.32vw;
      }
    }
    .popup-b {
      height: 10.4vw;
      p {
        width: 91.4vw;
        height: 10.4vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        text-align: left;
        font-family: PingFangSC-regular;
        margin-left: 4.2vw;
        line-height: 4.2vw;
        letter-spacing: 0.2vw;
      }
    }
    .popup-c {
      width: 91vw;
      height: 18vw;
      border-radius: 1.33vw;
      background-color: rgba(45, 47, 59, 100);
      color: rgba(214, 214, 214, 100);
      //font-family: Arial;
      margin-left: 4.2vw;
      margin-top: 10.2vw;
      position: relative;
      .div1 {
        width: 38.66vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.7vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 4.2vw;
        letter-spacing: 0.32vw;
      }
      .div2 {
        line-height: 5.3vw;
        border-radius: 1.3vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        text-align: left;
        //font-family: Arial;
        position: relative;
        left: 4.2vw;
        top: 5.6vw;
      }
    }
    .popup-d {
      width: 91vw;
      height: 18vw;
      border-radius: 1.33vw;
      background-color: rgba(45, 47, 59, 100);
      color: rgba(214, 214, 214, 100);
      //font-family: Arial;
      margin-left: 4.2vw;
      margin-top: 8.2vw;
      position: relative;
      .div1 {
        width: 38.66vw;
        color: rgba(255, 255, 255, 100);
        font-size: 3.7vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 4.2vw;
        letter-spacing: 0.32vw;
      }
      .div2 {
        line-height: 5.3vw;
        border-radius: 1.3vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        text-align: left;
        //font-family: Arial;
        position: relative;
        left: 4.2vw;
        top: 5.6vw;
      }
    }
    .popupt {
      background-color: #090A1B;
      border: 0.53vw solid rgba(10, 122, 255, 100);
    }
    .popup-button {
      width: 91.4vw;
      height: 9.8vw;
      line-height: 5.3vw;
      border-radius: 0.8vw;
      background-color: rgba(10, 122, 255, 100);
      font-size: 3.7vw;
      //font-family: Arial;
      margin-top: 8.5vw;
    }
    .content-c {
      height: 10.66vw;
      background-color: #090A1B;
      p {
        float: left;
        margin-top: 4.26vw;
        margin-left: 4.6vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
      }
    }
    .content-d {
      width: 93.33vw;
      // height: 9.6vw;
      border-radius: 0.53vw;
      background-color: rgba(45, 47, 59, 100);
      margin-left: 3.46vw;
      input {
        width: 90vw;
        height: 9.6vw;
        background-color: rgba(45, 47, 59, 100);
        border-width: 0;
        font-size: 3.6vw;
        // margin-left: 1.4vw;
        line-height: 9.6vw;
        font-weight: 600;
      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
        font-weight: 500;
      }

      // p {
      //   width: 90.66vw;
      //   height: 4.8vw;
      //   color: rgba(214, 214, 214, 100);
      //   font-size: 3.5vw;
      //   text-align: left;
      //   font-family: PingFangSC-regular;
      //   margin-left: 1.33vw;
      //   position: relative;
      //   top: 2.8vw;
      // }
    }
    .content-e {
      width: 93.33vw;
      height: 9.6vw;
      border-radius: 0.53vw;
      background-color: rgba(45, 47, 59, 100);
      margin-left: 3.46vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      input {
        width: 59vw;
        background-color: rgba(45, 47, 59, 100);
        border-width: 0;
        font-size: 3.73vw;
        margin-left: 1.8vw;
        font-weight: 600;
      }
      input::-webkit-input-placeholder {
        color: rgba(79, 82, 93, 100);
        font-weight: 500;
      }
      span {
        color: rgba(79, 82, 93, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
        position: relative;
        right: 3.13vw;
      }
      p {
        color: rgba(252, 218, 94, 100);
        font-size: 3.46vw;
        font-family: PingFangSC-regular;
        position: relative;
        right: 2.66vw;
      }
    }
    .content-f {
      height: 21vw;
      border-bottom: 0.4vw solid rgba(45, 47, 59, 100);
      .div {
        display: flex;
        justify-content: space-between;
        .p1 {
          height: 4.53vw;
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          position: relative;
          top: 6vw;
          left: 3.46vw;
        }
        .p2 {
          // width: 14.93vw;
          height: 4.53vw;
          // color: rgba(135, 139, 151, 100);
          color:#fff;
          font-size: 3.2vw;
          text-align: right;
          font-family: PingFangSC-regular;
          float: right;
          position: relative;
          right: 3.2vw;
          top: 6vw;
        }
      }
      .div {
        .p3 {
          height: 4.5vw;
          color: rgba(135, 139, 151, 100);
          font-size: 3.2vw;
          text-align: left;
          font-family: PingFangSC-regular;
          float: left;
          position: relative;
          top: 10vw;
          left: 3.46vw;
        }
        .p4 {
          height: 4.53vw;
          // color: rgba(135, 139, 151, 100);
          color:#fff;
          font-size: 3.2vw;
          text-align: right;
          font-family: PingFangSC-regular;
          float: right;
          position: relative;
          top: 9.8vw;
          right: 3.2vw;
        }
      }
    }
    .content-g {
      height: 34vw;
      .g1 {
        width: 100vw;
        height: 11.46vw;
        position: relative;
        text-align: left;
        top: 3.26vw;
        left: 3.46vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.73vw;
        font-family: PingFangSC-regular;
      }
      .g2 {
        width: 92vw;
        height: 7vw;
        position: relative;
        text-align: left;
        left: 3.46vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
        span {
          color: #fff;
        }
      }
      .g3 {
        width: 92vw;
        position: relative;
        text-align: left;
        left: 3.46vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        font-family: PingFangSC-regular;
      }
    }
    .content-k {
      border-top: 1px solid #171A2B;
      height: 48vw;
      background-color: #090A1B;
      .p1 {
        height: 4.53vw;
        color: rgba(135, 139, 151, 100);
        font-size: 3.2vw;
        text-align: left;
        font-family: PingFangSC-regular;
        position: relative;
        top: 6vw;
        left: 3.46vw;
      }
      button {
        width: 36.26vw;
        height: 9.6vw;
        line-height: 5.3vw;
        border-radius: 1.3vw;
        background-color: rgba(10, 122, 255, 100);
        color: rgba(255, 255, 255, 100);
        font-size: 3.73vw;
        text-align: center;
        //font-family: Arial;
        position: relative;
        top: 2.4vw;
        left: 28vw;
      }
      .p2 {
        width: 50vw;
        height: 6.66vw;
        color: rgba(255, 255, 255, 100);
        font-size: 4.8vw;
        text-align: left;
        font-family: PingFangSC-regular;
        display: flex;
        position: relative;
        top: -2vw;
        left: 3.46vw;
        font-weight: 600;
        span {
          color: rgba(255, 255, 255, 100);
          font-size: 3.2vw;
          font-family: PingFangSC-regular;
          position: relative;
          top: 1.6vw;
          left: 1.06vw;
        }
      }
    }
  }
}
.hui {
  background-color: #4d4e58 !important;
  border-color: #4d4e58;
  color: #8992AE !important;
}
</style>
